<template>
	<view class="container">
		<view class="hello">你好，欢迎回家！</view>
		<view class="hasKey" v-if="hasKey">
			<view class="eKey">
				<view class="name">测试锁</view>
				<view class="time">2023-09-21 11:11 至 2023-10-21 11:11</view>
				<view class="battery">
					<batteryShow :num="num"></batteryShow>
				</view>
				<view class="lockKey">
					<view class="lock" @click="open">
						<view class="lockIn" hover-class="hoverClass">
							<uni-icons type="locked" size="40" color="#909399"></uni-icons>
							<view class="lockBtn">点击开锁</view>
						</view>
					</view>
					<view class="lockBg" v-if="loading">
						<view class="dian dian1"></view>
						<view class="dian dian2"></view>
						<view class="dian dian3"></view>
						<view class="dian dian4"></view>
						<view class="dian dian5"></view>
					</view>
				</view>
				<button type="primary" class="btn">单次密码</button>
			</view>
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">无电子钥匙，请联系管家</view>
		</view>
	</view>
</template>

<script>
const plugin = requirePlugin('ttLock');
export default {
	data() {
		return {
			hasKey: true,
			num: 93,
			loading: false,
			timer: null
		};
	},
	onShow() {},
	onPullDownRefresh() {
		setTimeout(() => {
			this.stopPull();
		}, 1000);
	},
	methods: {
		stopPull() {
			uni.stopPullDownRefresh();
		},
		open() {
			if (!this.loading) {
				this.loading = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.loading = false;
				}, 2500);
			} else {
				uni.showToast({
					icon: 'none',
					title: '开锁中，请稍候'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 0 40rpx;
	.hello {
		font-size: 40rpx;
		font-weight: bold;
		padding-top: 50rpx;
	}
	.hasKey {
		padding: 50rpx 0;
		.eKey {
			box-sizing: border-box;
			width: 100%;
			background: #fff;
			box-shadow: $uni-shadow-base;
			border-radius: 20rpx;
			padding: 50rpx 20rpx;
			text-align: center;
			.name {
				font-size: 30rpx;
				color: #000;
				font-weight: bold;
				line-height: 2;
			}
			.time {
				font-size: 24rpx;
				color: $uni-secondary-color;
			}
			.battery {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx 0;
			}
			.lockKey {
				height: 460rpx;
				position: relative;
				.lock {
					width: 280rpx;
					height: 280rpx;
					border: 1rpx solid $uni-border-2;
					box-shadow: $uni-shadow-base;
					border-radius: 100%;
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					justify-content: center;
					align-items: center;
					.lockIn {
						width: 240rpx;
						height: 240rpx;
						border: 1rpx solid $uni-border-1;
						border-radius: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.lockBtn {
							margin-top: 20rpx;
							font-size: 28rpx;
							color: $uni-secondary-color;
						}
					}
				}
				.lockBg {
					width: 360rpx;
					height: 360rpx;
					border-radius: 100%;
					position: absolute;
					z-index: 0;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					animation: turn 1.5s linear infinite;
					.dian {
						border-radius: 50%;
						position: absolute;
						transform: translate(-50%, -50%);
						background: #ededed;
						&.dian1 {
							top: 0%;
							left: 50%;
							width: 25rpx;
							height: 25rpx;
						}
						&.dian2 {
							top: 1%;
							left: 38%;
							width: 20rpx;
							height: 20rpx;
						}
						&.dian3 {
							top: 5%;
							left: 27%;
							width: 15rpx;
							height: 15rpx;
						}
						&.dian4 {
							top: 11%;
							left: 17%;
							width: 10rpx;
							height: 10rpx;
						}
						&.dian5 {
							top: 20%;
							left: 9%;
							width: 5rpx;
							height: 5rpx;
						}
					}
				}
			}
			.btn {
				width: 200rpx;
				border-radius: 40rpx;
				margin: 20rpx auto;
			}
		}
	}
}
@keyframes turn {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
</style>
